import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	//组件间共享的数据或者需要集中管理的数据放在state里面
  state: {
	  //商品列表数据
	  shoplist: [
	  		  { 'id': 1, 'title': '电水壶', 'price': 50.01, src: '/images/1.jpg' },
	  		  { 'id': 2, 'title': '电压力锅', 'price': 260.99, src: '/images/2.jpg' },
	  		  { 'id': 3, 'title': '电饭煲', 'price': 200.99, src: '/images/3.jpg' },
	  		  { 'id': 4, 'title': '电磁炉', 'price': 300.99, src: '/images/4.jpg' },
	  		  { 'id': 5, 'title': '微波炉', 'price': 400.99, src: '/images/5.jpg' },
	  		  { 'id': 6, 'title': '电饼铛', 'price': 200.99, src: '/images/6.jpg' },
	  		  { 'id': 7, 'title': '豆浆机', 'price': 199.99, src: '/images/7.jpg' },
	  		  { 'id': 8, 'title': '多用途锅', 'price': 510.99, src: '/images/8.jpg' }
	  		],
	  //购物车数据
	  shopcart: []
  },
  //getters相当于store的计算属性，可以对state里面的数据进行计算或过滤，getters接收state作为第一个参数
  getters: {
	  totalPrice(state){
		  var total = 0;
		  state.shopcart.forEach(item => {
			  total += item.price * item.num;
		  })
		  return total;
	  }
  },
  mutations: {
	  //mutation类似方法，对于state里面数据的处理（变更）都放在mutations里面，mutation接收state作为第一个参数
	  add(state,item){
		  //判断购物车里面是否有当前添加的商品
		  var first = state.shopcart.find(i => i.id == item.id);
		  //如果有，直接商品数据加1
		  if(first){
			  first.num++;
		  //如果没有，商品添加num属性后push到shopcart
		  }else{
			  state.shopcart.push({
				  id: item.id,
				  title: item.title,
				  price: item.price,
				  src: item.src,
				  num: 1
			  })
		  }
	  },
	  //删除购物车数据
	  del(state,item){
		  state.shopcart.forEach((i,index,arr) => {
			  if(i.id == item.id){
				  arr.splice(index,1);
			  }
		  })
	  }
  },
  //actions类似于mutations，不同的是actions是提交一个mutation，而不是变更数据；actions里面可以进行异步操作，
  //mutations里面只能进行同步操作；actions接收context作为第一个参数，context是跟store有相同属性和方法的一个对象，可以理解成store的副本
  actions: {
	  add(context,item){
		  context.commit('add',item)
	  }
  },
  modules: {
  }
})
